import Vue from 'vue'
import VueRouter from 'vue-router'
import FilmsView from '@/views/FilmsView'
import NowPlaying from '@/views/FilmsView/NowPlaying'
import ComingSoon from '@/views/FilmsView/ComingSoon'
import NewsView from '@/views/NewsView'
import CenterView from '@/views/CenterView'

Vue.use(VueRouter)

const routes = [
  { // 电影
    path: '/films',
    // name: 'films',
    component: FilmsView,
    redirect: '/films/nowplaying',
    children: [
      { // 正在热映
        path: 'nowplaying',
        component: NowPlaying
      },
      { // 即将上映
        path: 'comingsoon',
        component: ComingSoon
      }
    ]
  },
  { // 影院
    path: '/cinemas',
    component: () => import(/* webpackChunkName: "cinemas" */ '@/views/CinemasView')
  },
  { // 资讯
    path: '/news',
    component: NewsView
  },
  { // 我的
    path: '/center',
    component: CenterView
  },
  { // 电影详情
    path: '/film/:filmId',
    props: true, // 路由参数解耦
    component: () => import(/* webpackChunkName: "film" */ '@/views/FilmView')
  },
  { // 城市列表
    path: '/cities',
    component: () => import(/* webpackChunkName: "cities" */ '@/views/CitiesView')
  },
  { // 购票列表
    path: '/film/:filmId/cinemas',
    name: 'tickets',
    props: true,
    component: () => import(/* webpackChunkName: "tickets" */ '@/views/TicketsView')
  },
  { // 影院信息(线下)
    path: '/cinema/:cinemaId',
    props: true,
    component: () => import(/* webpackChunkName: "cinema" */ '@/views/CinemaView/CinemaOffline')
  },
  { // 影院信息(线上)
    // 路由匹配规则：https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js
    path: '/cinema/:cinemaId/film/:filmId?/:showDate?',
    props: true,
    component: () => import(/* webpackChunkName: "cinema" */ '@/views/CinemaView')
  },
  {
    path: '*',
    redirect: '/films/nowplaying'
  }
]

const router = new VueRouter({
  routes
})

export default router
